<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>通过Nginx正向代理实现跨域</title>
</head>

<body>
    <button id="btn">执行AJAX请求</button>
    <p id="data">data</p>

    <!-- conf是配置configuration的缩写  proxy代理-->
    <script>
        // conf configuration 配置
        // proxy_pass 代理关口（要访问的目的地）
        /* 
        通过访问当前域名下的/testproxy Nginx服务器会为你代理到proxy_pass所对应的实际地址
        location /cities { 
            proxy_pass http://localhost:8000/files/json/cities.json;
        } 
        */

        function xhrGet(url) {
            // 创建一个XHR对象
            const xhr = new XMLHttpRequest();

            // 配置请求方式和请求路径
            xhr.open("GET", url);

            // 发送请求
            xhr.send(null);

            // 监听【就绪状态变更事件】
            // xhr.onreadystatechange = function (e) {
            //     // 查看就绪状态（xhr.readyState）和服务端响应状态码（xhr.status）
            //     let rs = xhr.readyState;
            //     let s = xhr.status;
            //     console.log("onreadystatechange", rs, s);

            //     if (rs === 4 && s === 404) {
            //         console.log("未发现资源");
            //         setTimeout(() => {
            //             document.write("未发现资源")
            //         }, 1000);
            //     }

            //     // 如果它们同时就绪且OK
            //     if (rs === 4 && /^2\d{2}$/.test(s)) {
            //         // 就获取返回数据（xhr.responseText）
            //         console.log(xhr.responseText);

            //         data.innerText = xhr.responseText
            //     }
            // };

            /* readyState走到4且status为2XX时触发xhr的load事件 */
            xhr.onload = function () {
                console.log(xhr.responseText);
                data.innerText = xhr.responseText
            }

            console.log("请求发送完毕！");
        }

        btn.onclick = function () {
            // xhrGet("http://localhost:8000/files/json/cities.json")
            xhrGet("http://localhost:80/cities")
        }

    </script>
</body>

</html>